<template>
	<!--
	 本页面模板教程：https://ext.dcloud.net.cn/plugin?id=2586
	 uni-list 文档：https://ext.dcloud.net.cn/plugin?id=24
	 uniCloud 文档：https://uniapp.dcloud.io/uniCloud/README
	 uni-clientDB 组件文档：https://uniapp.dcloud.net.cn/uniCloud/uni-clientdb-component
	 DB Schema 规范：https://uniapp.dcloud.net.cn/uniCloud/schema
	 -->
	<view>
		<!-- 刷新页面后的顶部提示框 -->
		<view class="tips" :class="{ 'tips-ani': tipShow }">为您更新了1条订阅信息</view>
		<view class="totalNum">共{{data.length}}门课程</view>

		<!-- 基于 uni-list 的页面布局 -->
		<uni-list>
			<!-- to属性：将新闻ID和标题传给详情页 -->
			<!-- TODO：需增加日期格式化的示例 -->
			<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
			<uni-list-item-menu style="margin-bottom:15rpx" direction="row" v-for="item in data" :key="item.id" :title="item.title"
			 :note="item.description + ' '+item.id">
				<!-- 通过header插槽定义列表左侧的图片显示，其他内容通过List组件内置属性实现-->
				<template v-slot:header>
					<view class="uni-thumb">
						<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
						<image :src="item.imgUrl" mode="aspectFill"></image>
					</view>
				</template>
				<template v-slot:body>
					<view class="uni-list-item__content">
						<view class="title"><text>{{item.title}}</text></view>
						<view class="hot">
							<custom-icons color="red" size="15" type="huo" />
							<text class="pingfen">{{item.pingfen}}</text>
							<text class="pingfen2">{{item.renshu}}人学过</text>
						</view>
						<view class="note"><text class="text" :title="item.description">{{item.description}}</text>
							<custom-icons color="green" size="18" type="xiaoxi" @click="pageTo('/pages/course/consult/consult')"/>
						</view>
					</view>
				</template>
			</uni-list-item-menu>
		</uni-list>
		<uni-load-more :loadingType="2" :showIcon="true" status="noMore"></uni-load-more>
		<!-- <view class="footText"><text>没有更多课程啦~</text></view> -->
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItemMenu from '@/components/uni-list-item/uni-list-item-menu.vue'
	import customIcons from '@/components/custom-icons/custom-icons.vue'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		components: {
			uniList,
			uniListItemMenu,
			customIcons,
			uniLoadMore
		},
		data() {
			return {
				// 数据表名
				collection: 'opendb-news-articles',
				// 查询字段，多个字段用 , 分割
				field: '_id,mode,avatar,title,user_name,excerpt,last_modify_date',
				formData: {
					status: 'loading', // 加载状态
				},
				tipShow: false, // 是否显示顶部提示框
				//模拟数据
				data: [{
						id: 1,
						title: "Springboot深入学习",
						description: "这是课堂描述",
						pingfen: "4.8",
						renshu: 2266,
						imgUrl: "../../static/img/356.png"
					},
					{
						id: 2,
						title: "Vue进阶学习",
						description: "这是课堂描述",
						pingfen: "4.8",
						renshu: 2266,
						imgUrl: "../../static/img/356.png"
					},
					{
						id: 3,
						title: "Springcloud入门教程",
						description: "这是课堂描述2222222",
						pingfen: "4.8",
						renshu: 2266,
						imgUrl: "../../static/img/356.png"
					}, {
						id: 4,
						title: "ES6语法详细教程",
						description: "这是课堂描述",
						pingfen: "4.8",
						renshu: 2266,
						imgUrl: "../../static/img/356.png"
					}, {
						id: 5,
						title: "ES6语法详细教程",
						description: "这是课堂描述",
						pingfen: "4.8",
						renshu: 2266,
						imgUrl: "../../static/img/356.png"
					}, {
						id: 6,
						title: "ES6语法详细教程",
						description: "这是课堂描述",
						pingfen: "4.8",
						renshu: 2266,
						imgUrl: "../../static/img/356.png"
					}
				]

			};
		},
		onLoad() {},
		methods: {
			/**
			 * 下拉刷新回调函数
			 */
			onPullDownRefresh() {
				this.data.push({
					id: 7,
					title: "我是刷新新增的",
					description: "这是课堂描述",
					pingfen: "4.8",
					renshu: 2266,
					imgUrl: "../../static/img/356.png"
				})
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			pageTo(url) {
				uni.navigateTo({
					url
				})
			}

		}
	};
</script>

<style lang="scss">
	@import '@/common/uni-ui.scss';

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #f2f4f8;
		min-height: 100%;
		height: auto;
	}

	.tips {
		color: #67c23a;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f9eb;
		height: 0;
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.3s;
	}

	.tips-ani {
		transform: translateY(0);
		height: 40px;
		opacity: 1;
	}

	.totalNum {
		font-size: 14px;
		color: black;
		opacity: 0.7;
		height: 70rpx;
		line-height: 70rpx;
		padding-left: 20rpx;
	}

	.content {
		width: 100%;
		display: flex;
	}

	.list-picture {
		width: 100%;
		height: 145px;
	}

	.thumb-image {
		width: 100%;
		height: 100%;
	}

	.ellipsis {
		display: flex;
		overflow: hidden;
	}

	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.uni-list-item__content {
		font-size: 15px;
		line-height: 50rpx;

		.title {
			font-weight: 600;
		}

		.pingfen {
			padding: 0 15rpx;
		}

		.pingfen2 {
			opacity: 0.5;
			font-size: 12px;
		}

		.note {
			padding-top: 15rpx;
			font-size: 13px;
			width: 250rpx;
			line-height: 100%;

			.text {
				width: 70%;
				display: inline-block;
				white-space: nowrap;
				/*文本不进行换行*/
				overflow: hidden;
				/*隐藏溢出文本*/
				text-overflow: ellipsis;
				margin-right: 30rpx;
			}
		}
	}

	.footText {
		opacity: 0.7;
		font-size: 14px;
		text-align: center;
		padding: 20px 0;
	}
</style>
